  var jsonData;
  var physChartImgData;
  var envChartImgData;
  var svpChartImgData;
  
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(init);
  
  $(document).ready(function() {
     
     $("#btnExport").click(function() {
    	 exportCharts();
     });
     
     $('#selOccGroup').on('change', function(){
        var selected = this.value;
        $('#selOcc').val("0");
        loadData();
     });
     
     $('#cbxSvp').click(function() {
    	$("#svpPanel").toggle(); 
     });
     
     $('#cbxPhys').click(function() {
     	$("#physPanel").toggle(); 
     });
     
     $('#cbxEnv').click(function() {
      	$("#envPanel").toggle(); 
     });
     
     $('#cbxPhysEnv').click(function() {
       	$("#physEnvPanel").toggle(); 
     });
     
     $(document).on('click', '.panel-heading span.clickable', function(e) {
    	
         var $this=$(this);
         
         if ((this.id=='physSpanPDF') || (this.id=='envSpanPDF') || (this.id=='svpSpanPDF')) {
        	 exportChart(this.id);
         } else if (this.id=='physSpan') {
        	 if ($this.find('i').hasClass("glyphicon-chevron-up")) {
        		 $this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
        		 $("#occPanel").toggle();
            	 $("#svpPanel").toggle();
            	 $("#envPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#physPanel").removeClass("col-md-6");
            	 $("#physPanel").addClass("col-md-12");
            	 $("#physChart_div").css("width","1250px");
            	 $("#physChart_div").css("height","600px");
            	 drawPhysChart(jsonData.physDemandsList);
        	 } else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
        		 $this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
        		 $("#occPanel").toggle();
            	 $("#svpPanel").toggle();
            	 $("#envPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#physPanel").removeClass("col-md-12");
            	 $("#physPanel").addClass("col-md-6");
            	 $("#physChart_div").css("width","650px");
            	 $("#physChart_div").css("height","370px");
            	 drawPhysChart(jsonData.physDemandsList);
        	 }        	 
         } else if (this.id=='envSpan') {
        	 if ($this.find('i').hasClass("glyphicon-chevron-up")) {
        		 $this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
        		 $("#occPanel").toggle();
            	 $("#svpPanel").toggle();
            	 $("#physPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#envPanel").removeClass("col-md-6");
            	 $("#envPanel").addClass("col-md-12");
            	 $("#envChart_div").css("width","1250px");
            	 $("#envChart_div").css("height","600px");
            	 drawEnvChart(jsonData.envConditionsList);
        	 } else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
        		 $this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
        		 $("#occPanel").toggle();
            	 $("#svpPanel").toggle();
            	 $("#physPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#envPanel").removeClass("col-md-12");
            	 $("#envPanel").addClass("col-md-6");
            	 $("#envChart_div").css("width","650px");
            	 $("#envChart_div").css("height","370px");
            	 drawEnvChart(jsonData.envConditionsList);
        	 }        	 
         } else if (this.id=='svpSpan') {
        	 if ($this.find('i').hasClass("glyphicon-chevron-up")) {
        		 $this.find('i').removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
        		 $("#occPanel").toggle();
            	 $("#envPanel").toggle();
            	 $("#physPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#svpPanel").removeClass("col-md-6");
            	 $("#svpPanel").addClass("col-md-12");
            	 $("#svpChart_div").css("width","1250px");
            	 $("#svpChart_div").css("height","600px");
            	 drawSvpChart(jsonData.svpList);
        	 } else if ($this.find('i').hasClass("glyphicon-chevron-down")) {
        		 $this.find('i').removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
        		 $("#occPanel").toggle();
            	 $("#envPanel").toggle();
            	 $("#physPanel").toggle(); 
            	 $("#physEnvPanel").toggle();
            	 $("#svpPanel").removeClass("col-md-12");
            	 $("#svpPanel").addClass("col-md-6");
            	 $("#svpChart_div").css("width","650px");
            	 $("#svpChart_div").css("height","390px");
            	 drawSvpChart(jsonData.svpList);
        	 }        	 
         }
    	     
     });
     
  });  
  
  function init() {
	 initCharts();  
  }
  
  function initCharts() {
	 initPhysChart();
	 initEnvChart();
	 initSvpChart();
  }
  
  function initPhysChart() {
	  var data = google.visualization.arrayToDataTable([
	  ['Physical Element', 'Percent'],
	  ['', 0]
	  ]);
	                                   	  
	  var options = {
	      title: 'Incidence of Physical Requirements',
	      legend: {position: 'none'},
	      chartArea: {width:'90%', height:'60%', left : 75, top: 50},
	      vAxis: {title: 'Percentage of Employees Required', minValue: 0, maxValue:100}
	  };
	                                   	  
	  var ac = new google.visualization.ColumnChart(document.getElementById('physChart_div'));
	  ac.draw(data, options);
  }
  
  function initEnvChart() {
	  var data = google.visualization.arrayToDataTable([
	  ['Environmental Element', 'Percent'],
	  ['', 0]
	  ]);
	                                              	                                   	  
	  var options = {
          title: 'Environmental Exposure',
	      legend: {position: 'none'},
	      chartArea: {top: 50},
	      hAxis: {title: 'Percentage of Employees Required', minValue:0, maxValue:100}
	  };
	                                              	                                   	  
	  var ac = new google.visualization.BarChart(document.getElementById('envChart_div'));
	  ac.draw(data, options); 
  }
  
  function initSvpChart() {
	  
	  var data = google.visualization.arrayToDataTable([
	  ['svpDesc', 'svpPercent'],
	  ['', 100]
	  ]);
	  
	  var options = {
		  title: "Education Required",
		  legend: { position: 'none' },
		  chartArea: { left:30, top:70, width:'100%', height:'100%' },
		  tooltip: {trigger:'none'}
	  };
	  
	  var chart = new google.visualization.PieChart(document.getElementById('svpChart_div')); 
      chart.draw(data, options); 
  }
 
  function exportChart(chartPanel) {
	  
	  var doc = new jsPDF();
	  
	  if (chartPanel=='physSpanPDF') {
		  doc.addImage(physChartImgData, "png", 1, 1, 125, 70, undefined, "none");
		  doc.save('physReq.pdf');
	  } else if (chartPanel=='envSpanPDF') {
		  doc.addImage(envChartImgData, "png", 1, 1, 125, 70, undefined, "none");
		  doc.save('envReq.pdf');
	  } else if (chartPanel=='svpSpanPDF') {
		  doc.addImage(svpChartImgData, "png", 1, 1, 125, 70, undefined, "none");
		  doc.save('svpReq.pdf');
	  }
	  
  }
  
  function exportCharts() {
	    var doc = new jsPDF();
		
		doc.addImage(physChartImgData, "png", 1, 1, 125, 70, undefined, "none");
		
		doc.addImage(envChartImgData, "png", 1, 80, 125, 70, undefined, "none");
		
		doc.save('occProfile.pdf');
 
  }
  
  function drawCharts(chartData) {
	  drawPhysChart(chartData.physDemandsList);
	  drawEnvChart(chartData.envConditionsList);
	  drawSvpChart(chartData.svpList);
  }
  
  function drawEnvChart(chartData) {
	  var dataArray = [];
	  var options = {
	      title: 'Incidence of Environmental Exposure',
	      legend: {position: 'none'},
	      chartArea: {top: 50},
	      hAxis: {title: 'Percentage of Employees Required'},
	      colors: ['#e0440e']
	  };
	  
	  var gdata = new google.visualization.DataTable();
	  gdata.addColumn("string","Environmental Element");
	  gdata.addColumn("number","Percent");
	  $.each(chartData, function (i, obj) {
			dataArray.push([obj.envElement, obj.envPercent]);
	  });
	  
	  gdata.addRows(dataArray);
	  
	  var chart = new google.visualization.BarChart(document.getElementById('envChart_div')); 
	  
	  var formatter = new google.visualization.NumberFormat({
			suffix : '%'
		});
	  formatter.format(gdata, 1);
	  
	  google.visualization.events.addListener(chart, 'ready', function () {
			 envChartImgData = chart.getImageURI();
	  });
	  
      chart.draw(gdata, options); 
  }
  
  function drawPhysChart(chartData) {
	  var dataArray = [];
	  var options = {
	      title: 'Incidence of Physical Requirements',
	      legend: {position: 'none'},
	      chartArea: {width:'90%', height:'60%', left : 75, top: 50},
	      vAxis: {title: 'Percentage of Employees Required'},
	      colors: ['#e0440e']
	  };
	  
	  var gdata = new google.visualization.DataTable();
	  gdata.addColumn("string","Physical Element");
	  gdata.addColumn("number","Percent");
	  $.each(chartData, function (i, obj) {
			dataArray.push([obj.physElement, obj.physPercent]);
	  });
	  
	  gdata.addRows(dataArray);
	 
	  var chart = new google.visualization.ColumnChart(document.getElementById('physChart_div'));
	  
	  var formatter = new google.visualization.NumberFormat({
			suffix : '%'
	  });
	  formatter.format(gdata, 1);
	  
	  google.visualization.events.addListener(chart, 'ready', function () {
		 physChartImgData = chart.getImageURI();
	  });

      chart.draw(gdata, options); 
	  
  }
  
  function drawSvpChart(chartData) {
	  var dataArray=[];
	  var options2 = {
		  title: "Education Required",
		  tooltip: { text: 'percentage'},
	      legend: { position: 'left' },
	      chartArea: { left:30, top:70, width:'70%', height:'70%' }
	  };
	  
	  var gdata = new google.visualization.DataTable();
	  
	  gdata.addColumn("string", "svpDesc");
	  gdata.addColumn("number", "svpPercent");
	  
	  $.each(chartData, function (i, obj) {

		dataArray.push([obj.svpDesc, obj.svpPercent]);

	  });
	  
	  gdata.addRows(dataArray);
	  
	  var chart = new google.visualization.PieChart(document.getElementById('svpChart_div'));
	  
	  google.visualization.events.addListener(chart, 'ready', function () {
			 svpChartImgData = chart.getImageURI();
	  });
	  
      chart.draw(gdata, options2); 
  } 
	 
  function loadData() {
	 
	  var occProfileUrl = "http://" + window.location.host + "/ORSDBWeb/rest/occProfileSvc/getOccProfileData/"
	 
	 $.get(occProfileUrl, function(data,status){
		 jsonData = data;
		 drawCharts(data);
	 });
  } 